<template>
  <div>
    <el-row type="flex" class="block_1 flex-row">
      <el-col :span="6">
        <div class="group_1 flex-row">
          <img class="label_1" referrerpolicy="no-referrer" src="@/assets/logo@2x.png" />
        </div>
      </el-col>
      <el-col :span="16">
        <div class="group_2 flex-row justify-between">
          <div v-for="item in nav" :key="item.key" :class="{
            bg__default: currentId != item.key,
            active: currentId == item.key,
          }">
            <router-link :to="item.path">{{ item.name }}</router-link>
          </div>
          <div class="time-select" v-show="this.$route.path === '/'">
            <el-select v-model="value" placeholder="请选择" @change="change">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="home-getBack" v-show="this.$route.path === '/warningSum' || this.$route.path === '/disposeWarning'
            || this.$route.path === '/userSum' || this.$route.path === '/durationAvg' || this.$route.path === '/timeFrequency'
            || this.$route.path === '/frequencyCount'">
            <span @click="goBack">返回</span>
            <img src="@/assets/getBack.png" @click="goBack" />
          </div>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="group__3 flex-row justify-end">
          <div>
            <!-- <img class="icon1" src="@/assets/user@2x.png" />
            <img class="icon1" src="@/assets/xiala@2x.png" /> -->
            <el-dropdown>
              <span class="el-dropdown-link">
                <img class="icon1" src="@/assets/user@2x.png" />
                <img class="icon1" src="@/assets/xiala@2x.png" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item divided @click.native="logout" v-if="token">
                  <span style="display: block">退出登录</span>
                </el-dropdown-item>
                <el-dropdown-item divided @click.native="toPage('/login')" v-else>
                  <span style="display: block">登录</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="divide-line"></div>
          <img class="icon1" src="@/assets/shezhi@2x.png" @click="toPage('/homePage')" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import { GetDateStr, getStamp } from "@/utils/getTime.js";

export default {
  name: "HeaderComponent",
  props: ["currentId"],
  computed: { ...mapGetters(["token"]), ...mapState("message", ["socket"]) },
  created() {
    this.options.forEach((item, index) => {
      if (index == 0) {
        this.options[index].value = this.threeDays;
      }
      else if (index == 1) {
        this.options[index].value = this.sevenDays;
      } else if (index == 2) {
        this.options[index].value = this.OMonth;
      } else if (index == 3) {
        this.options[index].value = this.TMonth;
      } else if (index == 4) {
        this.options[index].value = this.HalfYear;
      } else {
        this.options[index].value = 'lastMonthReport';
      }
    })
    this.value = this.threeDays;
    this.$emit("change", this.value);
  },
  data() {
    return {
      nav: [
        {
          key: 1,
          name: "首页",
          path: "/"
        },
        {
          key: 2,
          name: "预警中心",
          path: "/warning"
        },
        {
          key: 3,
          name: "最多跑一次统计",
          path: "/once"
        },
        {
          key: 4,
          name: "办理时限统计",
          path: "/timeLimt"
        },
        {
          key: 5,
          name: "区域人流量分析",
          path: "/traffic"
        },
        {
          key: 6,
          name: "人员识别",
          path: "/personnel"
        },
        {
          key: 7,
          name: "用户画像",
          path: "/user"
        },
        {
          key: 8,
          name: "规范化管理",
          path: "/rule"
        }
      ],
      threeDays: getStamp(GetDateStr(-3), 10),
      sevenDays: getStamp(GetDateStr(-7), 10),
      OMonth: getStamp(GetDateStr(-30), 10),
      TMonth: getStamp(GetDateStr(-90), 10),
      HalfYear: getStamp(GetDateStr(-180), 10),
      options: [
        {
          value: this.threeDays,
          label: '近三天'
        },
        {
          value: this.sevenDays,
          label: '近七天'
        },
        {
          value: this.OMonth,
          label: '近一个月'
        }, {
          value: this.TMonth,
          label: '近三个月'
        }, {
          value: this.HalfYear,
          label: '近半年'
        },
        {
          value: 'lastMonthReport',
          label: '上个月报告'
        }],
      value: this.threeDays
    };
  },
  methods: {
    toPage(path) {
      this.$router.push(path);
    },

    //退出登录
    logout() {
      this.$store.dispatch("user/logout").then(() => {
        this.$router.push("/login");
        if (this.socket) this.socket.close();
      });
    },
    change(val) {
      console.log(val, 'change');
      if (val === 'lastMonthReport') {
        console.log(window.location.origin, '路由');
        // 获取当前页面的完整路由
        const fullPath = 'bannerShow'
        // 获取当前页面的完整 URL
        const fullUrl = window.location.origin + '/#/' + fullPath;
        // 在新窗口中打开
        window.open(fullUrl, '_blank');
        return
      }
      this.$emit("change", val);
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped lang="scss">
.block_1 {
  background-color: rgba(48, 49, 54, 1);
  width: 100%;
  height: 66px;

  .group_1 {
    width: 440px;
    height: 66px;
    border: 1px gradient;

    .label_1 {
      width: 440px;
      height: 66px;
    }
  }

  .group_2 {
    height: 66px;
    align-items: center;
    font-family: PingFang SC-Semibold;
    margin-left: 32px;

    a {
      color: #5cfbff;
      text-decoration: none;
      display: inline-block;
      width: 100%;
      height: 100%;
    }

    div {
      text-align: center;
      height: 36px;
      line-height: 36px;
      width: 144px;
      font-size: 16px;
      flex: 1;
      cursor: pointer;
    }

    .bg__default {
      background-image: url("../assets/weixuanzhong@2x.png");
      background-size: 100% 100%;
    }

    .bg__default:hover {
      background-image: url("../assets/xuanzhong@2x.png");
    }

    .active {
      background-image: url("../assets/xuanzhong@2x.png");
      background-size: 100% 100%;

      a {
        color: #fff !important;
      }
    }
  }

  .group__3 {
    align-items: center;
    height: 66px;
    justify-content: space-evenly;

    .icon1 {
      width: 24px;
      height: 24px;
      cursor: pointer;
    }

    .divide-line {
      width: 1px;
      height: 16px;
      background-color: rgba(255, 255, 255, 0.5);
    }
  }

  .time-select {}

  .home-getBack {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: right;

    span {
      color: #ffffff;
      font-size: 16px;
    }

    img {
      width: 24px;
      height: 24px;
    }
  }
}
</style>
